<template>
  <div class="container">
    <div class="header">
      <div class="header-left">
        <a href="javascript:;" @click="goBack" class="iconfont back-icon"
          >&#xe624;</a
        >
      </div>
      <div class="title">安全生产举报须知</div>
    </div>
    <div class="content">
      <div class="agreement" v-html="sysset.reporting_guidelines"></div>
    </div>
    <div class="footer_btn">
      <router-link tag="button" :disabled="seconds > 0" :to="'/inform/form'">
        请阅读举报须知 <span v-if="seconds > 0">{{ seconds }}s</span>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "report_agreement",
  data() {
    return {
      seconds: "10",
      sysset: { reporting_guidelines: "" }
    };
  },
  created() {
    this.getSysset();

    this.countdown();
  },
  beforeDestroy() {},
  methods: {
    goBack() {
      this.$router.go(-1);
    },

    getSysset() {
      // var timestamp = Date.parse(new Date());
      // let getSysset = JSON.parse(localStorage.getItem("sysset"));
      // if (getSysset&&getSysset.getdata >= timestamp) {
      //   this.sysset = getSysset;
      // } else {
        this.$axios
          .get("/api/report/getSysset")
          .then(res => {
            // res.data.result.sysset.getdata = timestamp + 3000000; //300秒
            this.sysset = res.data.result.sysset;
            console.log(this.sysset);
            // localStorage.setItem("sysset", JSON.stringify(this.sysset));

            console.log(res);
          })
          .catch(error => {
            console.log(error);
          });
      // }
    },

    StartCountDown() {
      var mydate = new Date();
      mydate.setSeconds(mydate.getSeconds() + this.limittime);
      this.settime = mydate;

      let time = setInterval(() => {
        if (this.flag == true) {
          clearInterval(time);
        } else {
          this.timeDown();
        }
      }, 1000);
      this.$once("hook:beforeDestroy", () => {
        clearInterval(time);
      });
    },
    timeDown() {
      const endTime = new Date(this.settime);
      const nowTime = new Date();
      let leftTime = parseInt((endTime.getTime() - nowTime.getTime()) / 1000);
      let d = parseInt(leftTime / (24 * 60 * 60));
      let keepTime = this.timeFormate(leftTime);
      if (leftTime <= 0) {
        this.flag = true;
        this.study();
        this.keepTime = "已学完";
        this.learning = "学习完毕";
      }
      this.keepTime = keepTime;
    },
    formate(time) {
      if (time >= 10) {
        return time;
      } else {
        return `0${time}`;
      }
    },
    timeFormate(time) {
      let h = this.formate(parseInt((time / (60 * 60)) % 24));
      let m = this.formate(parseInt((time / 60) % 60));
      let s = this.formate(parseInt(time % 60));
      return `${h}:${m}:${s}`;
    },
    study() {
      this.$axios
        .put("api/article/" + this.$route.params.id + "/study")
        .then(res => {})
        .catch(error => {
          console.log(error);
        });
    },
    countdown() {
      if (this.seconds > 0) {
        this.seconds = this.seconds - 1;
        console.log(this.seconds);
        setTimeout(this.countdown, 1000);
      }
    }
  }
};
</script>

<style lang="stylus" scoped>
.container {
  overflow: hidden;
  background-color: #fff;
  height: 100%;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  height: 0.44rem;
  line-height: 0.44rem;
  background: #256ccb;
  color: #fff;

  .header-left {
    width: 0.4rem;

    .back-icon {
      display: block;
      text-align: center;
      font-size: 0.17rem;
      font-weight: bold;
      color: #fff;
    }
  }

  .title {
    width: 100%;
    text-align: center;
    margin-right: 0.33rem;
    font-size: 0.17rem;
    font-weight: bold;
  }
}

.content {
  margin-top: 0.44rem;
  display: block;
  height: calc(80% - 0.4rem);
  background-color: #fff;
  padding: 0.2rem 0.18rem;

  .agreement {
    height: 100%;
    word-wrap: break-word;
    overflow-y: auto;
-webkit-overflow-scrolling : touch;
    >p {
      line-height: 0.2rem;
      margin-bottom: 10px;
    }
  }
}

.footer_btn {
  margin-bottom: 20px;

  button {
    font-size: 18px;
    width: 90%;
    border-radius: 30px;
    padding: 8px;
    background: #e95858;
    color: white;
    margin-left: 5%;
  }

  button:disabled {
    background: #ff9696;
  }
}
</style>
<style lang="stylus">
.content {
  .agreement {
    > p {
      line-height: 0.23rem;
      margin-bottom: 0.05rem;
    }
  }
}
</style>